<template>
  <Layout type="Ol">
    <div class="ol">
      <div class="ol-head">
        <div class="ol-search-box">
          <div class="ol-search">
            <span class="font_family icon-sousuo"></span>
            <input
              type="text"
              class="input"
              v-model="query.search"
              @keydown.enter="handleSearch"
              placeholder="标题、员工等"
            />
            <span
              class="font_family icon-shanchu"
              v-show="isClear"
              @click="query.search = ''"
            ></span>
          </div>
          <OlDate v-model="query.date" />
        </div>
        <div class="ol-tabs">
          <div
            class="item"
            :class="query.type == 1 ? 'active' : ''"
            @click="chooseType(1)"
          >
            我的报工
          </div>
          <div
            class="item"
            :class="query.type == 2 ? 'active' : ''"
            @click="chooseType(2)"
          >
            报工审批
          </div>
          <div
            class="item"
            :class="query.type == 3 ? 'active' : ''"
            @click="chooseType(3)"
          >
            报工历史
          </div>
        </div>
        <div
          class="ol-select-box"
          v-if="query.type == 2 && shouldCheck == true"
        >
          <div class="select-box" @click="handleCheckALL">
            <span
              class="font_family icon-quanxuan_normal"
              v-if="checkall == false"
            ></span>
            <span class="font_family icon-quanxuan_half" v-else></span>
            <span class="text">全部</span>
          </div>
          <div class="select-length">
            已选<span class="num">{{ checklength }}</span
            >条
            <span class="select-check" @click="shouldCheck = false">取消</span>
          </div>
        </div>
        <div
          class="ol-select-box"
          v-if="query.type == 2 && shouldCheck == false"
        >
          <div class="select-box"></div>
          <div class="select-length" v-if="dataList != ''">
            <span class="select-check" @click="shouldCheck = true"
              >批量操作</span
            >
          </div>
        </div>
      </div>
      <!-- ol-list -->
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        v-if="!nodata"
        @load="onLoad"
      >
        <div class="ol-list" v-show="query.type != 2">
          <div
            class="ol-item"
            v-for="(item, index) in dataList"
            :key="index"
            @click="godetail(item.id)"
          >
            <div class="info">
              <div class="title">{{ item.project_name }}</div>
              <div class="time">{{ item.report_date }}</div>
            </div>
            <div class="more-info">
              <div class="desc">{{ item.title }}</div>
              <div class="hour">{{ item.time }}</div>
            </div>
            <div class="status">
              <p>
                {{ item.is_plan == 1 ? "计划内" : "计划外" }}
              </p>
            </div>
          </div>
        </div>
        <!-- ol-list -->
        <div class="ol-list ol-audit-list" v-show="query.type == 2">
          <div
            class="ol-item"
            :class="item.check == true && shouldCheck == true ? 'check' : ''"
            @click="handleCheck(index, item.check, item.id)"
            v-for="(item, index) in dataList"
            :key="index"
          >
            <div class="info">
              <div class="title">{{ item.project_name }}</div>
              <div class="time">{{ item.report_date }}</div>
            </div>
            <div class="more-info">
              <div class="desc">{{ item.title }}</div>
              <div class="hour">{{ item.time }}</div>
            </div>
            <div class="select-box">
              <div class="select-check" v-if="shouldCheck == true">
                <span
                  class="font_family icon-quanxuan_selected"
                  v-if="item.check == true"
                ></span>
                <span class="font_family icon-quanxuan_normal" v-else></span>
                <span class="text">{{ item.name }}</span>
              </div>
              <div class="select-check" v-else></div>
              <div class="status">{{ item.status | filterStatus }}</div>
            </div>
          </div>
        </div>
      </van-list>
      <no-data v-if="nodata" :noDataText="'暂无数据'"></no-data>
      <!-- ol-add -->
      <div class="ol-add" v-show="query.type == 1" @click="handleAdd">
        <span class="font_family icon-xinjian_list"></span>
      </div>
      <!-- ol-audit -->
      <div class="ol-aduit" v-if="query.type == 2 && shouldCheck == true">
        <transition name="audit">
          <div class="ol-audit-textarea" v-if="showMoreAuditText == true">
            <div
              class="ol-audit-textarea-head"
              @click="showMoreAuditText = false"
            >
              <div class="title">审批意见</div>
              <div><span class="font_family icon-gengduo"></span></div>
            </div>
            <textarea
              class="audit-textarea"
              v-model="auditText"
              placeholder="请输入审批意见"
            />
          </div>
        </transition>
        <div
          class="ol-audit-opera"
          :class="showMoreAuditText == false ? 'show-border' : ''"
        >
          <div class="ol-audit-text" @click="showMoreAuditText = true">
            {{ showMoreAuditText == true ? "" : "审批意见" }}
          </div>
          <div class="ol-audit-nopass" @click="handleAuditNoPass">驳回</div>
          <div class="ol-audit-pass" @click="handleAuditPass">同意</div>
        </div>
      </div>
      <transition name="audit-mask">
        <div class="ol-audit-mask" v-if="showMoreAuditText == true"></div>
      </transition>
    </div>
    <quit></quit>
  </Layout>
</template>
<script>
import Layout from "@/layout";
import OlDate from "@/components/ol-date";
import NoData from "@/components/noData";
import Quit from "@/components/quit";
import { report, approvalReport } from "@/api/ol";
import { Toast } from "vant";
export default {
  name: "Ol",
  components: {
    Layout,
    OlDate,
    NoData,
    Quit,
  },
  data() {
    return {
      dataList: [],
      nodata: false,
      query: {
        search: "",
        date: "",
        page: 1,
        type: 1,
      },
      loading: false, // 加载更多相关
      finished: false, // 加载更多相关
      checkall: false, // 选中全部
      shouldCheck: false, // 判断是否可以批量操作
      showMoreAuditText: false, // 审批备注
      auditText: "",
      isClear:false
    };
  },
  watch: {
    "query.date"() {
      this.handleSearch()
      // this.$nextTick(() => {
      //   this.getList();
      // });
    },
    'query.search'(newVal){
      if(newVal == ''){
        this.handleSearch()
        this.isClear = false
      }else{
        this.isClear = true
      }
    }
  },
  computed: {
    checklength() {
      const checkList = this.dataList.filter((item) => item.check === true);
      return checkList.length;
    },
  },
  filters: {
    filterStatus(value) {
      if (value === 2) {
        return "待审核";
      } else if (value === 3) {
        return "已审核";
      } else if (value === 4) {
        return "审核未通过";
      } else {
        return "";
      }
    },
  },
  mounted() {
    // this.getList()
  },
  methods: {
    handleSearch() {
      // 切换类型设置可以加载更多
      this.loading = true;
      this.finished = false;
      // 参数调整
      this.query.page = 1;
      this.dataList = [];
      this.getList();
    },
    chooseType(type) {
      // 切换类型设置可以加载更多
      this.loading = true;
      this.finished = false;
      //  重置类型和列表
      this.query.type = type;
      this.dataList = [];
      this.handleSearch();
    },
    // 下拉加载更多要处理下
    getList() {
      report(this.query).then((res) => {
        let data = [];
        if (res.data.data.length === 0 || res.data.data.length < 10) {
          this.finished = true;
        }
        if (this.query.type === 2) {
          data = res.data.data.map((item) => {
            item.check = false;
            return item;
          });
        } else {
          data = res.data.data;
        }
        this.dataList = this.dataList.concat(data);
        if (this.dataList.length == 0) {
          this.nodata = true;
        } else {
          this.nodata = false;
        }
        this.loading = false;
        this.query.page = this.query.page + 1;
      });
    },
    handleAdd() {
      this.$router.push("/ol/detail");
    },
    godetail(id) {
      if (this.query.type != 2) {
        this.$router.push({
          path: "/ol/detail",
          query: {
            id: id,
          },
        });
      }
    },
    // 加载更多
    onLoad() {
      this.getList();
    },
    handleCheckALL() {
      this.checkall = !this.checkall;
      const dataList = this.dataList.map((item) => {
        item.check = this.checkall;
        return item;
      });
      this.dataList = dataList;
    },
    handleCheck(index, status, id) {
      if (this.shouldCheck) {
        console.log(index, status);
        this.$set(this.dataList[index], "check", !status);
      } else {
        this.$router.push({
          path: "/ol/audit",
          query: {
            id: id,
          },
        });
      }
    },
    // 审批通过
    handleAuditPass() {
      const list = this.dataList.filter((item) => item.check === true);
      if (list.length === 0) {
        Toast("没有选择报工单");
        return false;
      }
      const id = list.map((item) => item.id);
      approvalReport({
        id,
        status: 1,
        comment: this.auditText,
      }).then(() => {
        Toast("审批完成");
        this.showMoreAuditText = false;
        this.handleSearch();
      });
    },
    // 审批不通过
    handleAuditNoPass() {
      const list = this.dataList.filter((item) => item.check === true);
      if (list.length === 0) {
        Toast("没有选择报工单");
        return false;
      }
      const id = list.map((item) => item.id);
      approvalReport({
        id,
        status: 0,
        comment: this.auditText,
      }).then(() => {
        Toast("审批完成");
        this.showMoreAuditText = false;
        this.handleSearch();
      });
    },
  },
};
</script>
<style lang="less" scoped>
.ol {
  background: #f7f9f9;
  padding-top: 102px;
  min-height: calc(100vh - (60px + env(safe-area-inset-bottom)));
  padding-bottom: calc(10px + env(safe-area-inset-bottom));
  box-sizing: border-box;
}
.ol-head {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: #fff;
  padding-top: 15px;
}
.ol-search-box {
  display: flex;
}
// ol-search
.ol-search {
  flex: 1;
  position: relative;
  margin: 0 0 0 15px;
  background: #f8f8f8;
  border-radius: 7px;
  height: 37px;
  // line-height: 37px;
  // padding-left: 14px;
  .input {
    width: 100%;
    display: block;
    height: 36px;
    font-size: 14px;
    padding: 6px 12px 6px 36px;
    border: 0;
    box-sizing: border-box;
    background: #f8f8f8;
    border-radius: 7px;
    &:focus {
      outline: none;
    }
  }
  .icon-sousuo {
    position: absolute;
    top: 50%;
    left: 10px;
    margin-top: -7px;
    font-size: 15px;
    color: #8f92a1;
  }
  .icon-shanchu {
    position: absolute;
    top: 7px;
    padding: 10px;
    right: 5px;
    margin-top: -7px;
    font-size: 15px;
    color: #8f92a1;
  }
}

// ol-tabs
.ol-tabs {
  display: flex;
  height: 40px;
  margin-top: 10px;
  .item {
    flex: 1;
    text-align: center;
    line-height: 40px;
    font-size: 13px;
    color: #313541;
    &.active {
      font-size: 14px;
      font-weight: bold;
      position: relative;
      color: #009966;
      &:after {
        position: absolute;
        content: "";
        left: 50%;
        bottom: 0;
        width: 20px;
        height: 1px;
        margin-left: -10px;
        background: #009966;
      }
    }
  }
}
// ol-select-box
.ol-select-box {
  display: flex;
  margin: 0 15px;
  height: 30px;
  line-height: 30px;
  justify-content: space-between;
  .select-box {
    .icon-quanxuan_normal {
      font-size: 13px;
      color: #8f92a0;
    }
    .icon-quanxuan_half {
      font-size: 13px;
      color: #009966;
    }
    .text {
      display: inline-block;
      margin-left: 3px;
      font-size: 12px;
      color: #313541;
    }
  }
  .select-length {
    font-size: 12px;
    color: #8f92a1;
    .num {
      color: #009966;
    }
    .select-check {
      color: #009966;
      background: rgba(0, 153, 102, 0.2);
      height: 21px;
      display: inline-block;
      line-height: 21px;
      border-radius: 5px;
      padding: 0 5px;
    }
  }
}
// ol-list
.ol-list {
  padding-top: 11px;
  &.ol-audit-list {
    padding-top: 41px;
  }
  .ol-item {
    // height: 78px;
    background: #fff;
    padding: 0 15px;
    margin: 0 15px 9px;
    border-radius: 7px;
    &.check {
      box-shadow: 0 0 1px 1px #43966a;
      // border: 1px solid #43966A;
    }
    .status {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      border-top: 1px solid #f2f2f2;
      padding: 6px 0px;
      p {
        color: #313541;
        font-size: 13px;
        margin: 0;
      }
      span {
        color: #0041c4;
        font-size: 13px;
      }
    }
    // select-box
    .select-box {
      display: flex;
      height: 30px;
      line-height: 30px;
      justify-content: space-between;
      border-top: 1px solid #f2f2f2;
      .select-check {
        .icon-quanxuan_normal {
          font-size: 13px;
          color: #8f92a0;
        }
        .icon-quanxuan_selected {
          font-size: 13px;
          color: #009966;
        }
        .text {
          display: inline-block;
          margin-left: 3px;
          font-size: 12px;
          color: #313541;
        }
      }
      .status {
        font-size: 12px;
        color: #0041c4;
      }
    }
    .info {
      display: flex;
      padding-top: 14px;
      height: 22px;
      .title {
        flex: 1;
        height: 22px;
        font-size: 16px;
        font-weight: bold;
        line-height: 22px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .time {
        width: 80px;
        height: 22px;
        line-height: 22px;
        color: #939dad;
        font-size: 12px;
        text-align: right;
      }
    }
    .more-info {
      display: flex;
      margin-top: 6px;
      height: 35px;
      .desc {
        flex: 1;
        font-size: 12px;
        height: 17px;
        line-height: 17px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .hour {
        width: 50px;
        height: 17px;
        line-height: 17px;
        font-size: 17px;
        font-weight: bold;
        color: #009966;
        text-align: right;
      }
    }
  }
  &.ol-audit-list {
    .ol-item {
      height: 108px;
    }
  }
}
// ol-aduit
.ol-aduit {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(60px + env(safe-area-inset-bottom));
  border-bottom: 1px solid #f2f2f2;
  z-index: 10;
  .ol-audit-textarea {
    border-top: 1px solid #f2f2f2;
    background: #fff;
    padding: 15px;
    transform-origin: bottom;
    .ol-audit-textarea-head {
      display: flex;
      justify-content: space-between;
      .title {
        font-size: 16px;
      }
      span {
        display: inline-block;
        transform: rotate(90deg);
      }
    }
    .audit-textarea {
      margin-top: 10px;
      width: 100%;
      height: 80px;
      border: 0;
      font-size: 14px;
      line-height: 18px;
      color: rgba(49, 53, 65, 1);
    }
  }
  .ol-audit-opera {
    position: relative;
    z-index: 1;
    padding: 0 15px;
    height: 47px;
    display: flex;
    background: #fff;
    &.show-border {
      border-top: 1px solid #f2f2f2;
    }
  }
  .ol-audit-text {
    flex: 1;
    font-size: 13px;
    color: #8f92a1;
    line-height: 47px;
  }
  .ol-audit-nopass {
    margin-top: 7px;
    height: 34px;
    line-height: 34px;
    text-align: center;
    width: 84px;
    background: #fa4e3e;
    color: #ffffff;
    font-size: 14px;
    border-radius: 5px;
    margin-right: 5px;
  }
  .ol-audit-pass {
    margin-top: 7px;
    height: 34px;
    line-height: 34px;
    text-align: center;
    width: 84px;
    background: #009966;
    color: #ffffff;
    font-size: 14px;
    border-radius: 5px;
  }
}
.ol-audit-mask {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: calc(60px + env(safe-area-inset-bottom));
  background: rgba(0, 0, 0, 0.7);
}
// ol-add
.ol-add {
  position: fixed;
  right: 21px;
  bottom: calc(140px + env(safe-area-inset-bottom));
  text-align: center;
  line-height: 46px;
  color: #fff;
  width: 46px;
  height: 46px;
  background: #009966;
  border-radius: 50%;
  box-shadow: 0px 3px 12px 1px rgba(0, 153, 102, 0.6);
  span {
    font-size: 36px;
  }
}
.audit-enter-active,
.audit-leave-active {
  transition: transform 0.5s;
}
.audit-enter, .audit-leave-to /* .fade-leave-active below version 2.1.8 */ {
  transform: translateY(160px);
}
.audit-mask-enter-active,
.audit-mask-leave-active {
  transition: opacity 0.5s;
}
.audit-mask-enter, .audit-mask-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}
</style>